<template>
    <div class="lunbo">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="changeIndex"
            :initial-swipe="startIndex">
            <van-swipe-item v-for="(item, index) in banners" @click="previewImg(index)">
                <img :src="item" alt="" width="100%" height="300px">
            </van-swipe-item>
            <template #indicator="{ active, total }">
                <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
            </template>
        </van-swipe>
    </div>
</template>

<script>
export default {
    props: ['banners'],
    data() {
        return {
            startIndex: 0
        }
    },
    methods: {
        previewImg(index) {
            showImagePreview({
                images: this.banners,
                startPosition: index,
                swipeDuration: 1000,
                onChange: (idx) => {
                    // console.log("idx",idx);
                    this.startIndex = idx;
                }
            })
        },
        changeIndex(index) {
            // console.log("swiperIndex", index);
            this.startIndex = index
        }
    }
}
</script>

<style lang="less" scoped>
.lunbo {
    height: 300px;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 200px;
    text-align: center;
}

.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 50px;
    padding: 2px 5px;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.1);
    color: white;
}
</style>